<template>
  
         <div style="display: flex; margin-top: -10px;
            justify-content: center;margin-bottom:50px">
                <h1>{{ title0 }}</h1>
            </div>
            <el-form ref="formRef" :rules="rules" :model="form" style="width: 60%; margin-top:20px;">   
                <el-form-item style="height: 80px; padding-left: 30px; padding-bottom: 50px;  align-items: center;" label="头像">
                      <div style="width: 300px;  height: 150px;overflow: hidden;">
                        <el-upload
                          v-model:file-list="fileList"
                          :auto-upload="false"
                          action="#"
                          :limit="1"
                          list-type="picture-card"
                          :on-change="uploadFile"
                          :on-remove="removeFile"
                          style="margin-left:85px ;"
                          >
                          <el-icon><PictureFilled /></el-icon>
                        </el-upload>
                      </div>
                    </el-form-item>

                    <el-form-item prop="nickName">
                    <div style="display: flex; width: 100%;">
                        <span style="flex: 3; padding-left: 30px;">昵称：</span>
                        <el-input :disabled="!IsShow" v-model="form.nickName" type="text" style="flex: 7; padding-right: 30px;" ></el-input>
                    </div>
                    </el-form-item>

                    <el-form-item prop="name">
                    <div style="display: flex; width: 100%;">
                        <span style="flex: 3; padding-left: 30px;">姓名：</span>
                        <el-input :disabled="!IsShow" v-model="form.name" type="text" style="flex: 7; padding-right: 30px;" placeholder="请填写姓名"></el-input>
                    </div>
                    </el-form-item>


                    <el-form-item prop="address">
                      
                    <div style="display: flex; width: 100%;">
                        <span style="flex: 3; padding-left: 30px;">地址：</span>
                        <el-cascader :disabled="!IsShow" v-model="form.address" placeholder="请选择你的地址" :options="pcaTextArr" style="margin-right: 30px; flex: 7;"></el-cascader>
                    </div>
                    <div style="display: flex; width: 100%; margin-top: 18px;" class="defaultAddress">
                        <span style="flex: 3; padding-left: 30px;"></span>
                        <el-input  disabled readonly v-model="form.address" style="margin-right: 30px; flex: 7; font-size:18px;"> </el-input>    
                    </div>
                    </el-form-item>

                    <el-form-item prop="birthday">
                    <div style="display: flex; width: 100%;">
                        <span style="flex: 3; padding-left: 30px;">生日：</span>
                        <el-date-picker :disabled="!IsShow" v-model="form.birthday" type="date" placeholder="请选择生日" style="flex: 7; padding-right: 30px;"></el-date-picker>
                    </div>
                    </el-form-item>

                            <el-form-item style="width: 100%; margin-top:60px;">
                                <div style="width: 100%; display: flex;
                                justify-content: space-evenly;" v-if="IsShow">    
                                <el-button type="primary" @click="updateUser" style="width: 40%;">
                                    提交
                                </el-button>
                                <el-button  type="primary" @click="deleteButton" style="width: 40%;">
                                    清除
                                </el-button>
                                </div>
                                <div style="width: 100%; display: flex; 
                                justify-content: space-evenly;" v-if="!IsShow">    
                                <el-button type="primary" @click="editPersonalButton" style="width: 40%;">
                                    编辑
                                </el-button>
                                <el-button  type="primary" @click="backButton" style="width: 40%;">
                                    返回
                                </el-button>
                                </div>
                                
                              </el-form-item>   
            
            </el-form>                
                
</template>
<script setup>
import {ref ,computed,reactive} from 'vue'
import { pcaTextArr } from "element-china-area-data";
import { Path } from '@/constant';
import { PictureFilled } from '@element-plus/icons-vue'
import { get,post } from '@/plugins/axios'
import { useUserStore } from '@/stores/pinia'
import { ElMessage } from 'element-plus';
const form = reactive({
  id: '',
  icon: '',
  nickName: '',
  name: '',
  address: '',
  birthday: '',
  icon: '',
  file: null
})
let fileList = reactive([])
getUser()
function getUser(){
   get(Path.getUserById, null, (content) => {
         for(let key in form){
      // 将后端没有的属性的数据排除掉
      if(Object.prototype.hasOwnProperty.call(content,key)){
        form[key] = content[key]
      }
    }
     fileList.push({
        url: Path.imgPath + content.icon
      })
   });
}
function uploadFile(file) {
  form.file = file.raw
}
function removeFile(){
  form.file = null
}
/* 规则 */
const rules = {
nickName: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
email: [
{ required: true, message: '邮箱不能为空', trigger: 'blur' },
{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
],
phone: [
{ required: true, message: '手机号不能为空', trigger: 'blur' },
{ pattern: /^[0-9]{11}$/, message: '手机号必须是11位数字', trigger: 'blur' }
],
address: [{ required: true, message: '地址不能为空', trigger: 'change' }],
birthday: [{ required: true, message: '生日不能为空', trigger: 'change' }]
};

function updateUser() {  
    formRef.value.validate((valid) => {  
        if (valid) {  
            post(Path.userUpdate, {
              openId: form.id,
              nickName: form.nickName,
              name: form.name,
              address: form.address,
              birthday: form.birthday,
              file: form.file,
              icon: form.icon
            }, content => {  
                location.reload()
            });  
        } else {  
            console.log('表单验证失败');  
            return false;  
        }  
    });  
}  

const formRef = ref(null);
let title0 = ref('个人信息')

let IsShow = ref(false)
/* 点击删除恢复默认 */
/* 由于没实现父子数据互传 于是把父组件伪数据copy过来了 */
const deleteButton = () =>{
    form.birthday = ''
    form.address = ''
    form.name = ''
    form.nickName = ''
    fileList.splice(0, fileList.length);
    IsShow.value=false
}

const editPersonalButton = () =>{
IsShow.value=true
}

</script>
<style scoped lang="scss">
    .avatar-container {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f0f0f0; /* 默认背景颜色，可根据需要调整 */
                }
                .el-form-item{
                  .defaultAddress{
                    ::v-deep .el-input__wrapper {opacity:0.589 ; background-color:#f0f0f0;border-radius: 5px;border: 1px solid #dcdfe6;
                    }
                  }
                span{
                    font-size:11.2px;
                }
                .el-input{
                    font-size:11.2px;
                }
            }       
            ::v-deep .el-input__wrapper {background-color: #f2f4f7;border-radius: 5px;border: 1px solid #dcdfe6;
            }
            ::v-deep .el-input__wrapper:hover { background-color: #ffffff;
border-color: #409eff;  transition: background-color 0.3s ease, border-color 0.3s ease; // 添加过渡效果
}
.custom-upload .el-upload-list--picture-card .el-upload-list__item {  
  width: 100px; /* 调整图片卡片的宽度 */  
  height: 100px; /* 调整图片卡片的高度 */  
}  
  
.custom-upload .el-upload-list--picture-card .el-upload-list__item .el-upload-list__item-thumbnail {  
  width: 100%; /* 确保缩略图填充整个卡片 */  
  height: 100%; /* 确保缩略图填充整个卡片 */  
  object-fit: cover; /* 覆盖模式，确保图片不会变形 */  
}  
  
/* 如果需要调整上传按钮（即图标）的大小，可能需要进一步调整 */  
.custom-upload .el-upload-list--picture-card .el-upload__input {  
  /* 这里可能需要根据你的图标大小来调整 */  
  width: 100%; /* 覆盖整个卡片 */  
  height: 100%; /* 覆盖整个卡片 */  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
  
/* 注意：如果 <PictureFilled /> 是一个自定义图标，并且你希望调整其大小，  
   你可能需要在该图标的样式中直接设置大小，或者通过父元素（如上面的 .el-upload__input）来间接影响 */
</style>